<template>
  <el-dialog
  :title="dialogMode === 'ADD' ? '新增' : '编辑'"
  :visible.sync="dialogVisiable"
  class="mdpt-modify-dialog"
  @close="cancel"
  >
  <el-form label-width="100px" class="demo-ruleForm" :rules="rules" :model="ruleForm" ref="ruleForm">
        <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="代码ID_1" prop="code_id1">
          <el-input v-model="ruleForm.code_id1" :disabled="editcodeid1" size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="代码取值_1" prop="code_value1">
          <el-input v-model="ruleForm.code_value1" :disabled="editcodevalue1" size="small"></el-input>
        </el-form-item>
        </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="代码ID_2" prop="code_id2">
            <el-input v-model="ruleForm.code_id2" :disabled="editcodeid2" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="代码取值_2" prop="code_value2">
              <el-input v-model="ruleForm.code_value2" :disabled="codevalue2" size="small"></el-input>
              </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24" class="btn-center">
            <el-form-item class="dialogbtn">
              <el-button @click="resetForm">重置</el-button>
              <el-button @click="cancel">关闭</el-button>
              <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
        </el-form-item>
          </el-col>
        </el-row>
      </el-form>
  </el-dialog>
</template>
<script>
import ajax from '../../../../../api/ajax/ajax'
import api from '../../../../../api/url'
import {numLetteValidator} from '../../../../../assets/js/rules'
export default {
  name: 'mdp-add-modify-dialog',
  data () {
    return {
      editcodeid1: false,
      editcodevalue1: false,
      editcodeid2: false,
      codevalue2: false,
      dialogVisiable: false,
      // te_date: '',
      // le_date: '',
      ruleForm: {
      code_id1: '',
      code_value1: '',
      code_id2: '',
      code_value2: ''
      // date: []
      },
      rules: {
          code_id1: [
            { required: true, message: '请输入', trigger: 'blur' },
            { max: 20, message: '最多输入20个字符', trigger: 'blur' },
            { validator: numLetteValidator, trigger: 'blur' }
          ],
          code_value1: [
            { required: true, message: '请输入', trigger: 'blur' },
            { max: 20, message: '最多输入20个字符', trigger: 'blur' },
            { validator: numLetteValidator, trigger: 'blur' }
          ],
          code_id2: [
            { required: true, message: '请输入', trigger: 'blur' },
            { max: 20, message: '最多输入20个字符', trigger: 'blur' },
            { validator: numLetteValidator, trigger: 'blur' }
          ],
          code_value2: [
            { required: true, message: '请输入', trigger: 'blur' },
            { max: 20, message: '最多输入20个字符', trigger: 'blur' },
            { validator: numLetteValidator, trigger: 'blur' }
          ]
          // date: [
          //   { required: true, message: '请选择日期', trigger: 'blur' }
          // ]
      }
    }
  },
  props: {
    dialogMode: {
      type: String,
      default: ''
    }
  },
  methods: {
    open () {
      this.editcodeid1 = false
      this.editcodevalue1 = false
      this.editcodeid2 = false
      this.codevalue2 = false
      this.ruleForm = {}
      this.currentItem = {}
      this.dialogVisiable = true
    },
    cancel () {
      this.$refs.ruleForm.clearValidate()
      this.dialogVisiable = false
      this.$refs.ruleForm.resetFields() // 移除校验 重置为初始状态
    },
    resetForm () {
        this.ruleForm = {...this.currentItem}
        this.$refs.ruleForm.clearValidate()
    },
    editShow (selNode) {
      this.editcodeid1 = true
      this.editcodevalue1 = true
      this.editcodeid2 = true
      this.codevalue2 = true
      // 显示编辑对话框
      this.dialogVisiable = true
      // 表单数据初始化
      let fromData = JSON.parse(JSON.stringify(selNode))
      this.ruleForm = {
        // date: [this.setTime(fromData.te_date), this.setTime(fromData.le_date)],
        ...fromData
      }
      this.currentItem = JSON.parse(JSON.stringify(this.ruleForm))
    },
    // getdate (list) {
    //   if (list) {
    //     this.te_date = getDateTime(list[0], 's').replace(/^(\d{8})(\d{6})$/, '$1')
    //     this.le_date = getDateTime(list[1], 's').replace(/^(\d{8})(\d{6})$/, '$1')
    //   } else {
    //     this.te_date = ''
    //     this.le_date = ''
    //   }
    // },
    // // 反显时间
    // setTime (s) {
    //   let dateList = ''
    //   let arr = s.replace(/^(\d{4})(\d{2})(\d{2})$/, '$1,$2,$3').split(',')
    //   dateList = (new Date(new Date().setFullYear(Number(arr[0]), Number(arr[1]) - 1, Number(arr[2]))))
    //   return dateList
    // },
    submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
              const insertdata = {
                code_id1: this.ruleForm.code_id1,
                code_value1: this.ruleForm.code_value1,
                code_id2: this.ruleForm.code_id2,
                code_value2: this.ruleForm.code_value2
                // te_date: this.te_date,
                // le_date: this.le_date
              }
              if (this.dialogMode === 'ADD') {
                // 新增接口
                ajax.post(api.INSERT_METACODEMAP, insertdata).then((res) => {
                  this.$emit('submitAfter')
                })
              } else if (this.dialogMode === 'MODIFY') {
                // 修改接口
                ajax.post(api.UPDATE_METACODEMAP, insertdata).then((res) => {
                  this.$emit('submitAfter')
                })
              }
              this.dialogVisiable = false
              this.$message({
                type: 'success',
                message: '添加成功!'
              })
          } else {
            return false
          }
        })
      }
  }
}
</script>
<style lang="stylus" ref = "stylesheet/stylus">
.mdpt-modify-dialog
  .el-dialog
    width 900px
    padding-right 20px
  .el-dialog__body
    margin 0 auto
    padding 20px 20px
    .el-input
      width 100%
      .el-input__inner
        height 40px
    .btn-center
      text-align right
</style>
